<template>
  <el-collapse>
      <el-collapse-item title="生命周期" name="1">
        <p v-for="(item,index) in text" :key="index">
            {{ text[index] }}
        </p>
      </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
    data(){
        return{
            text:[`生命周期:页面从初始化到完成渲染,经历更新最后销毁的过程`,
                `创建阶段  第一次页面加载执行( 一次性的)
            beforeCreate(){ 1.创建前 }`,
            `created(){ 2.创建后}`,
            `挂在阶段 第一次页面加载执行 (一次性的)`,
            `beforeMount(){ 3.挂载前 },`,
            `mounted(){ 4.挂载后 }`,
            `当组件被展示在html里的时候.用于自动发起请求等操作`,
            `更新阶段:无论是自己还是父级文件,当data或props数据被修改时触发,该阶段函数中,不可以修改data数据`,
            `beforeUpdate  更新前`,
            `updated  更新后`,
            `销毁阶段:当父组件使用 v-if 控制当前组件不显示时,意味着该组件被销毁`,
            ` beforeDestroy(){ 卸载前 }`,
            `重要:用于清理销毁全局变量或常驻内容的垃圾数据,比如定时器`,
            ` destroyed(){ 卸载完成 }`
            ]
        }
    }
}
</script>

<style>

</style>